<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">
        <!-- 循环数组 -->
        <ul>
            <li v-for="(item,index) in books" >{{index}}、{{item}}</li>
        </ul>
        <!-- 循环对象 -->
        <ul>
            <li v-for="(value,key,index) in person">{{index}}、{{key}}：{{value}}</li>
        </ul>
        <!-- 循环对象数组 -->
        <ul>
            <li v-for="p in persons">
                <img :src="p.img" style="width: 80px;height: 80px;">
                <p>编号：{{p.id}}</p>
                <p>姓名：{{p.name}}</p>
                <p>性别：{{p.sex}}</p>
                <p>年龄：{{p.age}}</p>
            </li>
        </ul>
        <hr/>
        <ul>
            <li v-for="p in persons">
                <p v-for="(val,key) in p">{{key}}:{{val}}</p>
            </li>
        </ul>
        <hr/>
        <ul>
            <li v-for="c in str">{{c}}</li>
        </ul>
        <hr/>
        <ul>
            <li v-for="n in count">{{n}}</li>
        </ul>
        <input type="button" value="添加一本书" @click="addBook" >
        <hr/>
        <h5>未完成的事项</h5>
        <ul>
            <li v-if="!item.isFinished" v-for="item in todolist" >{{item.desc}}</li>
        </ul>
        <h5>未完成的事项</h5>
        <ul>
            <li v-for="item in noFinish()" >{{item.desc}}</li>
        </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>

<script>

    let vm = new Vue({
        el:"#app",
        data:{
           str:"how old are you",
            count:5,
           books:["三国演义","西游记","红楼梦"],
           person:{
                name:"王一星",
                sex:"男",
                age:16
           },
           persons:[
            {
                img:"./imgs/1.jpg",
                id:'001',
                name:"王一星",
                sex:"男",
                age:16
            },
            {
                img:"./imgs/2.jpg",
                id:'002',
                name:"王二星",
                sex:"女",
                age:17
            },
            {
                img:"./imgs/3.jpg",
                id:'003',
                name:"大黄",
                sex:"男",
                age:18
            }
           ],
           todolist:[
            {
                desc:"写购物车",
                isFinished:false
            },
            {
                desc:"写我的",
                isFinished:true
            },
            {
                desc:"写他的",
                isFinished:false
            }
           ]
        },
        methods:{
            addBook(){
                this.books.push("水浒传");
            },
            noFinish(){
                return this.todolist.filter(item=>!item.isFinished);
            }
        }     
    });

    


</script>